<template>
  <div class="soil">
    <p>监测位置：<span>{{ props.position || '--' }}</span></p>
    <div class="content">
      <div class="card" v-for="v in state.list" :key="v.type">
        <div class="chart" :id="v.type"></div>
        <div class="name">{{ v.name }}</div>
        <div class="value">{{ v.value || '--' }}</div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { defineProps, onMounted, ref, reactive, nextTick } from 'vue';
import * as echarts from 'echarts'
import { getSoilInfo } from '@/api/map'

const props = defineProps({
  position: {
    default () {
      return '--'
    }
  },
  deviceId: {
    required: true
  }
})

const chartRefs = ref([])

const state = reactive ({
  list: [{}, {}, {}, {}]
})

const option = {
  tooltip: false,
  legend: false,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['80%', '100%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    }
  ]
};

const colors = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x1: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#D2E5E0' // 0% 处的颜色
    }, {
      offset: 1, color: '#B1DFDA' // 100% 处的颜色
    }],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x1: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#E5CFCF' // 0% 处的颜色
    }, {
      offset: 1, color: '#F49191' // 100% 处的颜色
    }],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x1: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#E0D6C9' // 0% 处的颜色
    }, {
      offset: 1, color: '#E2C69C' // 100% 处的颜色
    }],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x1: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#D1E4EF' // 0% 处的颜色
    }, {
      offset: 1, color: '#99AEE9' // 100% 处的颜色
    }],
  },
]

const setCharts = async () => {
  try {
    const res = await getSoilInfo(props.deviceId);
    state.list = [
      {
        type: 'PH',
        value: res.data[0].phValue,
        name: '土壤PH值'
      },
      {
        type: 'Humidity',
        value: res.data[0].humidity,
        name: '土壤湿度(%)'
      },
      {
        type: 'EC',
        value: res.data[0].conductivity,
        name: '土壤EC(S/m)'
      },
      {
        type: 'tem',
        value: res.data[0].temperature,
        name: '土壤温度(°C)'
      },
    ]
    await nextTick ();
    state.list.forEach((v, i) => {
      var chartDom = document.querySelector(`#${v.type}`);
      var myChart = echarts.init(chartDom);
      const _op = JSON.parse(JSON.stringify(option))
      _op.series[0].data = getData(v.value, colors[i])
      // _op.series[0].color = colors[i]
      myChart.setOption(_op)
    });
  } catch (error) {
    console.error(error);
  }

}

const getData = (value, color) => {
  const _value = Number(value);
  if (_value < 1)
    return [{
      value: _value, itemStyle: {
        color
      }
    }, {
      value: 1 - value,
      itemStyle: {
        color: '#F2F2F2'

      }
    }]
  if (_value < 10)
    return [{
      value: _value, itemStyle: {
        color
      }
    }, {
      value: 10 - value,
      itemStyle: {
        color: '#F2F2F2'

      }
    }]
  if (_value < 100)
    return [{
      value: _value, itemStyle: {
        color
      }
    }, {
      value: 100 - value,
      itemStyle: {
        color: '#F2F2F2'

      }
    }]

}

onMounted(() => {
  // console.log(document.querySelector('#PH'));
  setCharts()
})

</script>

<style lang="scss" scoped>
.soil {
  overflow: hidden;
  height: 6rem;
}

p {
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #7E7E7E;
  line-height: 0.4rem;
  margin-bottom: 0.47rem;

  span {
    color: #1E1E1E;
  }
}

.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1rem;

  .card {
    display: flex;
    align-items: center;
    margin-bottom: 0.42rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 50%;
    flex: 0 0 auto;

    .chart {
      width: 1.6rem;
      height: 1.6rem;
      margin-bottom: 0.19rem;
    }

    .name {
      font-size: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #7E7E7E;
    }

    .value {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0.47rem;
      font-size: 0.44rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #242424;
    }
  }
}
</style>